<template>
  <div class="select-robot-container">
    <!-- 导航栏 -->
    <van-nav-bar 
      title="选择机器人类型"
      class="custom-navbar"
    >
      <template #left>
        <van-icon name="arrow-left" class="nav-icon" @click="backRoute" />
      </template>
      <template #title>
        <span class="nav-title">选择机器人类型</span>
      </template>
    </van-nav-bar>



    <!-- 机器人类型列表 -->
    <div class="robot-types">
      
      <!-- 自定义个人消息推送机器人 -->
      <div 
        class="robot-type-card"
        :class="{ 'selected-card': selectedType === 'push' }"
        @click="selectType('push')"
      >
        <div class="robot-avatar">
          <img src='/static/mobile/img/common/robot_default.png' alt="消息推送机器人">
        </div>
        <div class="robot-info">
          <div class="robot-name">
            自定义个人消息推送机器人
          </div>
          <div class="robot-description">
            支持webhook协议的自定义接入,实现向个人自动推送的消息
          </div>
        </div>
      </div>
      
      <!-- 自定义个人会话机器人 -->
      <div 
        class="robot-type-card"
        :class="{ 'selected-card': selectedType === 'chat' }"
        @click="selectType('chat')"
      >
        <div class="robot-avatar">
          <img src='/static/mobile/img/common/robot_default.png' alt="会话机器人">
        </div>
        <div class="robot-info">
          <div class="robot-name">
            自定义个人会话机器人
          </div>
          <div class="robot-description">
            基于用户会话内容回复匹配的消息
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "SelectRobotType",
  data() {
    return {
      selectedType: ''
    };
  },
  methods: {
	backRoute() {
		this.$router.go(-1);
	},
	selectType(type) {

		if(type === 'chat'){
			this.$toast('会话机器人暂未推出')
		}else{
			this.$router.push(`/coordination/myHome/addRobot/${type}`)
		}

	}
  }
};
</script>

<style scoped>
.select-robot-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f7f8fa;
}

.custom-navbar {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-title {
  font-size: 16px;
  font-weight: bold;
  color: #26B1A1;
  letter-spacing: 0.5px;
}

.van-nav-bar .van-icon {
  color: #26B1A1;
  font-size: 16px;
}



.robot-types {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
  padding-left: 10px;
  position: relative;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #1989fa;
  border-radius: 2px;
}

.robot-type-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.robot-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(25, 137, 250, 0.15);
  border-color: #e6f7ff;
}

.selected-card {
  border: 2px solid #1976D2;
  background-color: #f0f7ff;
}

.robot-avatar {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  overflow: hidden;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #26B1A1 , #6FD0B3);
  flex-shrink: 0;
}

.robot-avatar img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.robot-info {
  flex: 1;
}

.robot-name {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}



.robot-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
</style>